<template>
	<view class="navbar">
		<uni-nav-bar :title="title" :border="false" :statusBar="true"
			:style="{'--font-size':`${fontSize}rpx`,'--font-weight':`${fontWeight}`}" :color="fontColor"
			:leftIcon="isShowBack?'left':'none'" :backgroundColor="backgroundColor"
			@clickLeft="clickBack"></uni-nav-bar>
	</view>
</template>

<script lang="ts">
	export default {
		name: 'navbar',
		options: {
			styleIsolation: 'shared'
		},
	}
</script>

<script setup lang="ts">
	import {
		defineProps,
		PropType,
		toRefs
	} from 'vue';
	import { useStore } from 'vuex';
	import { VERSION_TYPE } from '@/enum/version';

	const store = useStore();

	const props = defineProps({
		title: {
			type: String,
			default: '',
		},
		fontSize: {
			type: Number,
			default: 32,
		},
		fontWeight: {
			type: Number,
			default: 200,
		},
		fontColor: {
			type: String,
			default: '#333333',
		},
		backgroundColor: {
			type: String,
			default: '#ffffff',
		},
		isShowBack: {
			type: Boolean,
			default: true,
		},
		clickBack: {
			type: Function,
		}
	})
	const {
		title
	} = toRefs(props);
	const clickBack = () : void => {
		if (!props.isShowBack) return
		if (props.clickBack) {
			props.clickBack();
		} else {
			if (getCurrentPages().length > 1) {
				uni.navigateBack();
			} else {
				store.state.version == VERSION_TYPE.EXP_VERSION ? uni.router.route('/pages/home/home') : uni.router.route('/pages/statistics/statistics');
			}
		}

	}
</script>

<style lang="scss" scoped>
	@import "./style.scss";
</style>